import React, { useEffect, useState } from 'react'
import { getcity, getDw, getSear } from '../../axios/use'
import { IndexBar, List, SearchBar, NavBar } from 'antd-mobile'
import { LocationFill,DeleteOutline } from 'antd-mobile-icons'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { usecity } from '../../store/slice/tickey'
import { useDispatch } from 'react-redux'
import Mysear from '../../conmpont/Mysear'
import useLoad from '../../Hooks/useLoad'
const Index = () => {
    let load=useLoad()
    let nav = useNavigate()
    //城市列表
    let [citys, setCitys] = useState([])
    let [rm, setRm] = useState([])
    async function getlist() {
        let { data: res } = await getcity()
        setCitys(res.cityList)
        setRm(res.hotCities)
        console.log(res);
    }
    useEffect(() => {
        getlist()
    }, [])
    //当前城市定位
    let [dw, setDw] = useState([])
    async function getdw() {
        let { data: res1 } = await getDw('a89d4f5d66b193e8eae7ef224ce369fb')
        setDw(res1.city)
        console.log(res1);
    }
    useEffect(() => {
        getdw()
    }, [])
    //城市搜索
    let [list, setList] = useState([])
    let [wd, setWd] = useState('')
    useEffect(() => {
        async function getsear() {
            if (!wd) return
            let { data: res2 } = await getSear(wd)
            setList(res2)
            console.log(res2);
        }
        load(()=>{
            getsear()
        },600)
    }, [wd])
    //历史搜索
    let [historyList,setHistoryList]=useState(
        JSON.parse(localStorage.getItem('history'))||[]
    )
    //点击渲染到初始地或目的地
    let [search] = useSearchParams()
    // console.log(search.get('type'));
    const dispatch = useDispatch()
    const geto = (city) => {
        let obj = { type: search.get('type'), city }
        dispatch(usecity(obj))
        const set=new Set([city,...historyList])
        setHistoryList(Array.from(set))
        nav(-1)
    }
    useEffect(()=>{
    //    JSON.stringify(localStorage.setItem('history'))
    },[historyList])
    return (
        <div>
            <div>
                <NavBar onBack={() => nav(-1)}>
                    <SearchBar placeholder='如北京' onChange={(val) => setWd(val)} />
                </NavBar>
            </div>
            <div style={{ fontSize: '15px' }}><LocationFill />当前定位：{dw}</div>
            <div>
                <List header='搜索/历史'>
                    {
                        list.map((item, i) => (
                            <List.Item key={i} onClick={() => geto(item.name)}>{item.name}</List.Item>
                        ))
                    }
                </List>
            </div>
            <DeleteOutline fontSize={'20px'} />
                <div>
                        <Mysear myfn={geto} list={historyList}></Mysear>
                </div>
            <div className='rm'>
                <List header='热门城市'>
                    <ul>
                        {
                            rm.map((item, i) => (
                                <li key={i}>{item.name}</li>
                            ))
                        }
                    </ul>

                </List>
            </div>
            <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {citys.map(group => {
                        const { title, items } = group
                        return (
                            <IndexBar.Panel
                                index={title}
                                title={`标题${title}`}
                                key={`标题${title}`}
                            >
                                <List>
                                    {items.map((item, index) => (
                                        <List.Item key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}

export default Index
